<template>
  <div class="container">
  	  <div class="plans_title" >
  	  	    <div v-for="item of tableTitleList" :key="item.id">{{item.name}}</div>
  	  </div>

      <div class="plans_con">
            <div v-for="value in Message">{{value}}</div>
      </div>
  </div>
</template>

<script>
  export default {
  	props:{
        planMonthObj:{
        	type:Object
        }   
  	},
    computed:{
        Message(){
             var messageobj={};
             messageobj.startTime = this.planMonthObj.startTime
             messageobj.endTime = this.planMonthObj.endTime
             messageobj.productCount = this.planMonthObj.productCount
             messageobj.productModelCount = this.planMonthObj.productModelCount
             messageobj.finishedCount = this.planMonthObj.finishedCount
             messageobj.finishPercent = this.planMonthObj.finishPercent +"%"
             messageobj.state = this.planMonthObj.state
             return messageobj
        }
    },
    data() {
      return {
         tableTitleList:[{
         	id:'001',
         	name:'计划开始时间'
         },{
         	id:'002',
         	name:'计划结束时间'
         },{
         	id:'003',
         	name:'计划总产量'
         },{
         	id:'004',
         	name:'计划型号数量'
         },{
         	id:'005',
         	name:'计划完成数'
         },{
         	id:'006',
         	name:'达成率'
         },{
         	id:'007',
         	name:'状态'
         }]
      }
    }
  }
</script>
<style scoped>
.container{

}
.plans_title,
.plans_con{
    width: 100%;
    height: 34px;
    display: flex;

    border:1px solid #409eff;
    box-sizing: border-box;
}

.plans_title{
      background: #409eff;
}
.plans_title div,
.plans_con div{
     color:#606266;
     border-right: 1px solid #eee;
     height: 34px;
     flex:1; 
     text-align: center;
     line-height: 34px;
}
.plans_title div:last-child,
.plans_con div:last-child{
     border:none;
}
.plans_title div:nth-child(-n+2),
.plans_con div:nth-child(-n+2){
     flex-basis: 100px;
}

</style>